<template>
<div class="dashboard bigping">
  <div><h1 class="bigtle">久泰能源数据统计分析</h1></div>
  <div class="layout_top">
    <Row>
      <!-- 卡片 出勤率 -->
      <Col span="9" class="lft_box">
        <Card class="lft_a1 blak">
          <p slot="title"><Icon type="ios-film-outline"></Icon> 人员性别、岗位统计、学历统计</p>
          <div class="firstline">
            <SexAndPost></SexAndPost>
          </div>
        </Card>
        <Card class="lft_a2 blak">
          <p slot="title"><Icon type="ios-film-outline"></Icon> 数据统计</p>
          <div class="firstline datast">
            <p class="tle">员工人数/人</p>
            <p>男：<i>216</i></p>
            <p>女：<i>68</i></p>
            <p>总：<i>284</i></p>
            <p class="tle">本月产量/吨</p>
            <p>甲醇：<i>320</i></p>
            <p>乙烯：<i>680</i></p>
            <p>芳香烃：<i>528</i></p>
            <p class="tle">本月事件/次</p>
            <p>预警：<i>68</i></p>
            <p>已解决：<i>56</i></p>
            <p>待解决：<i>12</i></p>
            <p>风险：<i>10%</i></p>
          </div>
        </Card>
        <Card class="lft_a3 blak">
          <p slot="title"><Icon type="ios-film-outline"></Icon> 人员年龄段统计</p>
          <div class="firstline">
            <StaffAge></StaffAge>
          </div>
        </Card>
        <Card class="lft_a4 blak">
          <p slot="title"><Icon type="ios-film-outline"></Icon> 人员出勤率统计</p>
          <div class="firstline">
            <GateCard></GateCard>
          </div>
        </Card>
        <Card class="lft_a5 blak">
          <p slot="title"><Icon type="ios-film-outline"></Icon> 生产车间的气温（实时）</p>
          <div class="firstline">
            <Wendu></Wendu>
          </div>
        </Card>
        <Card class="lft_a6 blak">
          <p slot="title"><Icon type="ios-film-outline"></Icon> 今日车间值班人员</p>
          <div class="firstline">
            <Intop></Intop>
          </div>
        </Card>
      </Col>
      <!-- 卡片 年龄段 -->
      <Col span="6">
        <Card class="ctr_a1 blak">
          <p slot="title"><Icon type="ios-film-outline"></Icon> 报警部门、数量、事件分析</p>
          <div  class="firstline">
            <VehicleState></VehicleState>
          </div>
        </Card>
        <Card class="ctr_a2 blak">
          <p slot="title"><Icon type="ios-film-outline"></Icon> 产品分销地分布</p>
          <div  class="firstline">
            <WcState></WcState>
          </div>
        </Card>
      </Col>
      <!-- 卡片 性别、岗位 -->
      <Col span="9" class="rgh_box">
        <Card class="rgh_a1 blak">
          <p slot="title"><Icon type="ios-film-outline"></Icon> 2018年第二季度产量统计</p>
          <div  class="firstline">
             <Chanliang></Chanliang>
          </div>
        </Card>
        <Card class="rgh_a2 blak">
          <p slot="title"><Icon type="ios-film-outline"></Icon> 员工情况统计</p>
          <div  class="firstline">
             <VehicleType></VehicleType>
          </div>
        </Card>
        <Card class="rgh_a3 blak">
          <p slot="title"><Icon type="ios-film-outline"></Icon> 本月日产量总统计</p>
          <div  class="firstline">
             <Datechan></Datechan>
          </div>
        </Card>
      </Col>
    </Row>
  </div>
</div>
</template>

<script type="text/babel">
import {getmaps} from 'config/api';
export default {
  data () {
    return {
      wcList: [],
      wcMessage: {}
    };
  },
  components: {
    'GateCard': () => import('views/Dashboard/components/gateCard'), //  人员出勤率
    'SexAndPost': () => import('views/Dashboard/components/sexAndPost'),  //  员工性别、岗位
    'StaffAge': () => import('views/Dashboard/components/staffAge'),  //  员工年龄段
    'CleaningWork': () => import('views/Dashboard/components/cleaningWork'),  //  保洁作业
    'VehicleType': () => import('views/Dashboard/components/vehicleType'),  //  员工情况分析
    // 'StaffPost': () => import('views/Dashboard/components/staffPost'),  //  人员岗位
    'VehicleState': () => import('views/Dashboard/components/vehicleState'),  //  报警部门、数量、事件分析
    'ClearAndRemove': () => import('views/Dashboard/components/clearAndRemove'),  //  清运作业
    'EventState': () => import('views/Dashboard/components/eventState'),  //  事件状态
    'WcState': () => import('views/Dashboard/components/wcState'), //  产品分布状态
    'Datechan': () => import('views/Dashboard/components/datechan'), //  日产量对比
    'Wendu': () => import('views/Dashboard/components/wendu'), //  车间温度
    'Intop': () => import('views/Dashboard/components/intop'),  // 头部数据
    'Chanliang': () => import('views/Dashboard/components/chanliang') //  产品产量对比
  },
  created () {
    getmaps().then((res) => {
      let datas = res.data.data;
      for (var key in datas) {
        if (datas.hasOwnProperty(key)) {
          var element = datas[key];
          this.wcList.push({
            name: element.road, value: element.val  //  公测状态城市
          });
          this.wcMessage[element.road] = [element.lng, element.lat];
        }
      }
    });
  }
};
</script>

<style scoped>
  .bigping{
    min-width: 2560px;
  }
  .bigtle{
    color: rgb(18, 204, 224);
  }
  iframe {
    display: none;
  }
  .dashboard {
    margin-left: -6px;
  }
  .dashboard .ivu-card {
    margin: 6px;
  }
  .dashboard .ivu-card-body {
    padding: 0px;
  }
  .dashboard .firstline{
    height: 240px;
  }
  .dashboard .nextline, .dashboard .threeline{
    height: 380px;
  }
  .dashboard .lastline{
    height: 320px;
  }
  .dashboard .twoline{
    height: 300px;
  }
  /*响应式--驾驶舱   <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">   */  
  @media screen and (min-width: 1000px) and (max-width:1200px) {
    .dashboard .firstline{
      height: 190px;
    }
  }
  @media screen and (min-width: 1201px) and (max-width:1300px) {
    .dashboard .firstline{
      height: 210px;
    }
  }
  @media screen and (min-width: 1301px) and (max-width:1400px) {
    .dashboard .firstline{
      height: 220px;
    }
  }
  @media screen and (min-width: 1401px) and (max-width:1500px) {
    .dashboard .firstline{
      height: 240px;
    }
  }
  @media screen and (min-width: 1501px) and (max-width:1600px) {
    .dashboard .firstline{
      height: 260px;
    }
    .dashboard .twoline{
    height: 320px;
  }
  }
  @media screen and (min-width: 1601px) and (max-width:1920px) {
    .dashboard .firstline{
      height: 300px;
    }
    .dashboard .twoline{
    height: 350px;
  }
  }
  .lft_box>div{
    float: left;
  }
  .lft_a6{
    width: 98%;
    height: 100px;
  }
  .lft_a1{
    width: 36%;
    height: 350px;
  }
  .lft_a2{
    width: 15%;
    height: 350px;
  }
  .lft_a3{
    width: 45%;
    height: 350px;
  }
  .lft_a4{
    width: 60%;
    height: 400px;
  }
  .lft_a5{
    width: 37%;
    height: 400px;
  }
  .ctr_a1{
    height: 430px;
  }
  .ctr_a2{
    height: 440px;
  }
  .rgh_box>div{
    float: left;
  }
  .rgh_a1{
    width: 40%;
    height: 400px;
  }
  .rgh_a2{
    width: 56%;
    height: 400px;
  }
  .rgh_a3{
    width: 96%;
    height: 460px;
  }
  .datast{
    background: #333;
    height: 230px!important;
  }
  .datast p{
    width: 100%;
    line-height:18px;
    text-align: left;
    padding-left: 18px;
    color: #d5d5d5;
  }
  .datast p.tle{
    color: #d5d5d5;
    font-weight: 600;
    padding-left: 10px;
    /* font-weight: bold; */
  }
  .datast p i{
    color: #e90d0d;
  }
  /* 样式黑色修改 */
  .blak{
    background: #333;
  }
  .blak p{
    color: #d5d5d5;
  }
</style>